可编辑控件 
基于jQuery开发的列表在线编辑组件，其特点如下： 
1、负责整体表单控件的布局 
2、负责表单组件美化 
3、负责表单的整体样式 
4、负责记录添加，删除，复制以及表单序列化 
5、支持ajax和本地化两种形式填充原有数据； 
6、支持添加行后事件回调；

使用场景 :

1、引入相关JS脚本和依赖 
如果没有引入以下js，那么需要引入以下js

<script src="/js/ecology8/jquery_wev8.js"></script>

<!--checkbox组件-->
<link href="/js/ecology8/jNice/jNice/jNice_wev8.css" type=text/css rel=stylesheet>
<script language=javascript src="/js/ecology8/jNice/jNice/jquery.jNice_wev8.js"></script>
<!-- 下拉框美化组件-->
<link href="/js/ecology8/selectbox/css/jquery.selectbox_wev8.css" type=text/css rel=stylesheet>
<script language=javascript src="/js/ecology8/selectbox/js/jquery.selectbox-0.2_wev8.js"></script>

<!-- 泛微可编辑表格组件-->
<link rel="stylesheet" href="/wui/theme/ecology8/weaveredittable/css/WeaverEditTable_wev8.css">
<script  src="/wui/theme/ecology8/weaveredittable/js/WeaverEditTable_wev8.js"></script>

2、常用属性说明

<div class="groupmain" style="width:100%"></div><!-- 显示表格容器 -->
 <script>
 //定义表格的列
 var items=[
{width:"10%",colname:"描述信息",itemhtml:"<input type='text' name='descinfo' style='width: 50px'><span class='mustinput'></span>"},
{width:"15%",colname:"数据库字段",itemhtml:"<input type='text' name='datafield'>"},
{width:"15%",colname:"字段显示名",itemhtml:"<input type='text' name='datalabel'>"},
{width:"40%",colname:"字段类型",itemhtml:"<select name='datatype' style='width: 200px;height: 30px'><option value='0'>单行文本框</option><option value='1'>浏览框</option></select><span style='vertical-align: middle'>长度:</span><input name='datalength' type='text' style='width: 100px;vertical-align: middle' ><span class='mustinput'></span><span style='vertical-align: middle'>类型:</span><select name='ctype' style='width: 100px;height: 30px'><option value='0'>文本</option><option value='1'>数据</option></select>"},
{width:"15%",colname:"顺序",itemhtml:"<input type='text' name='dataorder'>"}];

//普通模式使用
var option= {basictitle:"主字段信息"',colItems:items};

//基于ajax方式使用
var option={navcolor:"#003399",basictitle:"主字段信息",colItems:items,useajax:true,ajaxurl:’/data/getdatas’,ajaxparams:’’}; 

//生成相应的可编辑表格对象
var group=new WeaverEditTable(option);
//将可编辑表格容器附加到dom节点上
$(".groupmain").append(group.getContainer());

</script>

3、示例代码

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/weaver.tld" prefix="wea"%>
<%@ include file="/systeminfo/init_wev8.jsp" %>
<HTML><HEAD>
<LINK href="/css/Weaver_wev8.css" type=text/css rel=STYLESHEET>
<script src="/js/ecology8/jquery_wev8.js"></script>
<!--checkbox组件-->
<link href="/js/ecology8/jNice/jNice/jNice_wev8.css" type=text/css rel=stylesheet>
<script language=javascript src="/js/ecology8/jNice/jNice/jquery.jNice_wev8.js"></script>
<!-- 下拉框美化组件-->
<link href="/js/ecology8/selectbox/css/jquery.selectbox_wev8.css" type=text/css rel=stylesheet>
<script language=javascript src="/js/ecology8/selectbox/js/jquery.selectbox-0.2_wev8.js"></script>
<!-- 泛微可编辑表格组件-->
<link rel="stylesheet" href="/wui/theme/ecology8/weaveredittable/css/WeaverEditTable_wev8.css">
<script  src="/wui/theme/ecology8/weaveredittable/js/WeaverEditTable_wev8.js"></script>

<script language=javascript src="/js/ecology8/request/e8.browser_wev8.js"></script>

<link type="text/css" href="/js/ecology8/base/jquery-ui_wev8.css" rel=stylesheet>
<script type="text/javascript" src="/js/ecology8/base/jquery-ui_wev8.js"></script>

<script type='text/javascript' src='/js/jquery-autocomplete/lib/jquery.bgiframe.min_wev8.js'></script>
<script type='text/javascript' src='/js/jquery-autocomplete/jquery.autocomplete_wev8.js'></script>
<script type='text/javascript' src='/js/jquery-autocomplete/browser_wev8.js'></script>
<link rel="stylesheet" type="text/css" href="/js/jquery-autocomplete/jquery.autocomplete_wev8.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-autocomplete/browser_wev8.css" />

</HEAD>
<body scroll="no">
<%@ include file="/systeminfo/RightClickMenuConent_wev8.jsp" %>
<%
RCMenu += "{提交表单,javascript:dosubmit(),_self} " ;
RCMenuHeight += RCMenuHeightStep;
%>
<%@ include file="/systeminfo/RightClickMenu_wev8.jsp" %>
<%
    String tiptitle = "这里我是个提示信息的描述" ;
%>
<form action="demo_edittableoperation.jsp" method="post" id="weaver" name="weaver">
<wea:layout type="fourCol">
     <wea:group context="可编辑表格Demo">
            <wea:item type="groupHead">
                <input type="button" class="addbtn" title="<%= SystemEnv.getHtmlLabelName(611,user.getLanguage())%>" onclick="groupAction.addRow();"/>
                <input type="button" class="delbtn" title="<%= SystemEnv.getHtmlLabelName(91,user.getLanguage())%>" onclick="deleteAction();"/>
            </wea:item>
            <wea:item attributes="{'isTableList':'true','colspan':'full'}">
                <div id="FieldList"></div>

                <script type="text/javascript">
                    var groupAction = null;
                    jQuery(document).ready(function(){
                        //初始化数据
                        var initjsondatas = [[{'name': 'id', 'value': '11','iseditable': 'true','type': 'checkbox'},
                                            {'name': 'fieldid', 'value': '3', 'label': '韦利东', 'iseditable': 'true','type': 'browser'},
                                           {'name': 'wb','value': '韦利东','iseditable': true, 'type': 'input' },
                                           {'name': 'xlk','value': '1', 'iseditable': true, 'type': 'select'},
                                           {'name': 'orderid','value': '1', 'iseditable': true, 'type': 'input'}
                                           ], [{'name': 'id', 'value': '12','iseditable': 'true','type': 'checkbox'},
                                           {'name': 'fieldid', 'value': '14', 'label': '隋清', 'iseditable': true, 'type': 'browser'},
                                           {'name': 'wb','value': '隋清','iseditable': true,'type': 'input'},
                                           {'name': 'xlk','value': '2','iseditable': true, 'type': 'select'},
                                           {'name': 'orderid','value': '2', 'iseditable': 'true', 'type': 'input'}]]

                        var item_browser  = "<span class='browser' viewType='0' _callback='UserCallBack' _callbackParams='_#rowIndex#' hasInput='true' name='fieldid' getBrowserUrlFn='getBrowserUrlFn' isMustInput='1' isSingle='false' completeUrl='/data.jsp' ></span>" ;
                        var items=[
                            {width:"10%",colname:"浏览按钮<SPAN class=\".e8tips\" style=\"CURSOR: hand\" id=remind_m title=\"<%=tiptitle %>\"><IMG id=ext-gen124 align=absMiddle src=\"/images/remind_wev8.png\"></SPAN>",itemhtml:item_browser},
                            {width:"20%",colname:"文本框",itemhtml:"<input name='wb' id='wb' type='text' value='默认值' />"},
                            {width:"20%",colname:"下拉框",itemhtml:"<select name='xlk' id='xlk' ><option value=''>全部</option><option value='1'>AA</option><option value='2'>BB</option></select>"},
                            {width:"20%",display:'none',colname:"排序",itemhtml:"<input name='orderid' id='orderid' type='text' />"}
                            ];
                        var option = {
                            basictitle:"可编辑表格标题。。。",
                            optionHeadDisplay:"none",
                            colItems:items,
                            container:"#FieldList", //显示容器的id
                            configCheckBox:true,
                            usesimpledata:true, //true|fase 当值为true时,则该可编辑表格默认以初始化数据初始化，初始化的具体数据配置详见initdatas
                            initdatas:initjsondatas,
                            canDrag:true,
                            orderField:'orderid',
                            //addrowCallBack:marcallback,//添加行时，回调的方法
                            checkBoxItem:{"itemhtml":'<input name="id" class="groupselectbox" type="checkbox" value="-1">',width:"5%"}
                        };
                        groupAction=new WeaverEditTable(option);
                        jQuery("#FieldList").append(groupAction.getContainer());
                    });
                    function deleteAction(){
                        //top.Dialog.confirm("<%=SystemEnv.getHtmlLabelNames("15097",user.getLanguage())%>",function(){
                            groupAction.deleteRows();
                        //});
                    }
                </script>
            </wea:item>
     </wea:group>
</wea:layout>
</form>
<script type="text/javascript">

jQuery(function(){
    jQuery("span[id^=remind]").wTooltip({html:true});// 加载调用wTooltip方法，才能美化提示信息
});

function getBrowserUrlFn(params){
    var urls = "/systeminfo/BrowserMain.jsp?url=/hrm/resource/MutiResourceBrowser.jsp";
    return urls;
}

function UserCallBack(event,datas,name,_callbackParams){
    jQuery("#wb"+_callbackParams).val(datas.name);
}

function dosubmit(){
    document.weaver.submit();
}
</script>
 </body>
</html>


 
    效果图如下：
 
 

接收数据页面示例

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/weaver.tld" prefix="wea"%>
<%@ page import="weaver.general.Util" %>
<%@ include file="/systeminfo/init_wev8.jsp" %>
<HTML><HEAD>
<LINK href="/css/Weaver_wev8.css" type=text/css rel=STYLESHEET>
<script src="/js/ecology8/jquery_wev8.js"></script>
</HEAD>
<body>
<div style="font-size:16px;">
<%
    int weaverTableRows = Util.getIntValue(request.getParameter("weaverTableRows"),0);//总行数  比如一共增加了10行，但删除了其中的5行，该值依然为10.
    int weaverTableRealRows = Util.getIntValue(request.getParameter("weaverTableRealRows"),0);//实际行数  比如一共增加了10行，但删除了其中的5行，该值就是5.
    String __weaverDeleteRows = Util.null2String(request.getParameter("__weaverDeleteRows"));//删除行的id

    out.println("总行数:"+weaverTableRows +" 实际行数"+weaverTableRealRows+" 删除数据的id:::"+__weaverDeleteRows);
    for(int i = 0 ; i < weaverTableRows ; i++){
        String fieldid = Util.null2String(request.getParameter("fieldid_"+i));
        String wb = Util.null2String(request.getParameter("wb_"+i));
        String xlk = Util.null2String(request.getParameter("xlk_"+i));
        String orderid = Util.null2String(request.getParameter("orderid_"+i));
        out.println("<br />第"+(i+1)+"行数据 {浏览按钮："+fieldid+" 文本："+wb+"  下拉框:"+xlk+"  排序:"+orderid+"}");
    }

%>
</div>
 </body>
</html>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
效果图如下：
 

4、说明 
更详细的说明参阅控件说明V51.xls中的可编辑表格 

 

下载Demo